<template>
  <div class="contact">
    <div class="news-bg">
      <img src="" alt="" />
    </div>
    <div class="content">
      <div class="title">我们在这里</div>
      <img src="@/assets/images/map.png" alt="" class="map-img" />
      <div class="office" v-for="item in addressInfo">
        <div class="office-name">{{ item.name }}</div>
        <div class="office-fullName">{{ item.fullName }}</div>
        <div class="office-address">地址(Add)：{{ item.address }}</div>
      </div>
      <div class="title">更多方式联系我们</div>
      <div class="way">
        <div class="item flex flex-direction-column">
          <div class="icon">
            <img src="@/assets/images/phone.png" alt="" />
            <div>电话</div>
          </div>
          <p>010-52712388</p>
        </div>
        <div class="item flex flex-direction-column">
          <div class="icon">
            <img src="@/assets/images/email.png" alt="" />
            <div>邮箱</div>
          </div>
          <p>service@hanruih2.com</p>
        </div>
      </div>
      <div class="qrcode-info flex flex-direction-column">
        <div class="icon">
          <img src="@/assets/images/wechat.png" alt="" />
          <div>微信公众号</div>
        </div>
        <img class="qrcode" src="@/assets/images/qrcode.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
const addressInfo = ref([
  {
    name: '公司总部',
    fullName: '北京瀚锐氢能科技有限公司',
    address: '北京市海淀区中关村'
  },
  {
    name: '研发中心 & 产业化生产基地',
    fullName: '广东瀚锐氢能科技有限公司',
    address: '佛山市南海区南海氢能中心'
  },
  {
    name: '工程化基地',
    fullName: '陕西瀚锐氢能科技有限公司',
    address: '陕西省西咸新区沣东新城协同创新港'
  }
])
</script>

<style lang="scss" scoped>
@import './styles/common.scss';
@import './styles/web.scss';
@import './styles/phone.scss';
</style>
